<template>
  <div>
    <!-- <van-field
      v-model="vanValue"
      is-link
      readonly
      label="派单编号*"
      placeholder="系统自动生成"
      @click="show = true"
    /> -->
    <van-cell is-link @click="show = true" v-model="vanValue" class="van-cells">
      <template #title>
        <span class="custom-title">{{ contents }}</span>
        <van-tag type="danger">*</van-tag>
      </template>
    </van-cell>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
      @closed="onClosed"
    >
      <!-- 弹出层内内容 -->
      <div v-for="item in dialogData" :key="item.id" class="popupBox">
        <van-cell :value="item.value" @click="onSelect(item)" />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    dialogData: {
      type: Array,
    },
    contents: {
      type: String,
    },
    vanValue: {
      type: String,
      default:''
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    onSelect(item) {
      this.show = false;
      this.$emit("update:vanValue",item.value)
      // this.$emit("updateSelect",item.value)
    },
    onClosed() {},
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.van-tag--danger{
    background-color #fff
    color rgba(253, 63, 63, 1)
  }
.popupBox{
  width 100px
  margin 10px auto
  text-align center
}
.van-cells{
  border-bottom 1px solid #ddd
}
</style>
